import { FormDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.HooksPackage);

# Mantine form

[![npm](https://img.shields.io/npm/dm/@mantine/form)](https://www.npmjs.com/package/@mantine/form)

[@mantine/form](https://www.npmjs.com/package/@mantine/form) package
contains `useForm` hook that manages form state, validation, and submission.
`useForm` hook is designed to be used with other Mantine libraries (`@mantine/core`, `@mantine/dates`, etc.)
– all Mantine inputs are compatible with `useForm` out of the box.

## Installation

<InstallScript packages="@mantine/form" />

## Usage

`@mantine/form` package can be used in any web React application.
Although the package is designed to work with Mantine component, it can
be used with native inputs or any other form libraries – it is standalone
and does not have any dependencies except React.

Example of using `useForm` hook to create a simple form:

<Demo data={FormDemos.usage} demoProps={{ defaultExpanded: false }} />

## License

MIT
